<template>
 <div>


      <table>
        <tr>
          <td>用户名</td>
          <td><input type="text" v-model="username"></td>
        </tr>
        <tr>
          <td>密码</td>
          <td><input type="text" v-model="password"></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <!--滑块验证码-->
            <drag-verify :width="width" :height="height" :text="text" ref="Verify"></drag-verify>
          </td>
        </tr>
        <tr>
          <td>
            <button @click="login" class="log">登录</button>
            <img src="http://127.0.0.1:8000/static/dingding.png" alt="钉钉登陆" @click="dingding">
          </td>
        </tr>
      </table>

		</div>







</template>

<script>
    import dragVerify from 'vue-drag-verify'

    export default {
        name: "Login2",
      data () {
          return {
            username:'',
            password:'',
            // 滑块验证码
            text:'请将滑块拖动到最右侧',
            width:200,
            height:20,
          }
        },

      // 注册组件标签
      components:{
        'dragVerify': dragVerify,
      },

        methods:{
          // 钉钉登陆
          dingding: function () {
            window.location.href = 'https://oapi.dingtalk.com/connect/qrconnect?appid=dingoaty1hbauyiitjsip2&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://127.0.0.1:8000/dingding_callback'
          },


          // 提交登录
          login:function () {

            // 验证是否拖动
            console.log(this.$refs.Verify.isPassing);
            if(this.$refs.Verify.isPassing == false){
              this.$Message('请拖动验证码')
              return false;
            }

            this.axios.get(
              'http://127.0.0.1:8000/login2/',
              {params:{username: this.username, password: this.password}}
              ).then(res=>{
                console.log(res)
              this.$Message(res.data.msg)
              if(res.data.code == 200){
                // 跳转
                this.$router.push('qinin')
              }
            })
          },


        }
    }
</script>

<style scoped>

</style>
